<template>
  <div class="pt-3px pr-3px">
    <PageWrapper class="high-form" title="代码生成器" :content="contentText">
      <div class="step-form-form">
        <Steps :current="current">
          <Steps.Step title="填写控制器信息" />
          <Steps.Step title="配置数据表信息" />
          <Steps.Step title="完成" />
        </Steps>
      </div>
      <div class="mt-5">
        <Card title="注意事项" v-show="current === 0">
          <div class="note">
            1. 菜单的图标可以在下面这个网站中拷贝
            <a
              href="https://icon-sets.iconify.design/"
              style="color: #1c6ca1; font-weight: bold; margin-left: 1%"
              target="_blank"
              >立即前往</a
            ></div
          >
        </Card>
        <Card title="注意事项" v-show="current === 1">
          <div class="note">
            1. id、created_at、updated_at、deleted_at和status系统会自动生成，请勿重复添加
          </div>
          <div class="note"> 2. 目前版本在生成代码的时候，下拉框需要您自己去配置。 </div>
          <div class="note"> 3. 图片上传接口配置见 vite.config.ts </div>
        </Card>
        <Card style="margin-top: 1%" title="控制器信息" :bordered="false" v-show="current === 0">
          <BasicForm @register="registerForm" :model="modelRef" @submit="addSubmitForm" />
        </Card>
        <Card
          style="margin-top: 1%"
          title="数据库字段信息"
          :bordered="false"
          v-show="current === 1"
        >
          <PersonTable ref="tableRef" />
        </Card>
      </div>
      <template #leftFooter>
        <Button type="primary" @click="current--" v-show="current !== 0"> 上一步 </Button>
      </template>
      <template #rightFooter>
        <Button type="primary" @click="current++" v-show="current === 0"> 下一步 </Button>
        <Button type="primary" @click="addSubmitForm" v-show="current === 1"> 提交 </Button>
      </template>
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { addCodeGeneration } from './api';
  import { getDatabaseForm } from './data/form';
  import { Button } from '/@/components/Button';
  import { Card, Steps } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import PersonTable from './table/index.vue';
  import _default from "ant-design-vue/es/vc-slick/inner-slider";
  import props = _default.props;

  const current = ref(0);
  const contentText = '一键生成您的数据库、后端以及页面的CURD，使你的开发速度飞一般的提升！';
  const modelRef = ref({});
  const [
    registerForm,
    { appendSchemaByField, removeSchemaByFiled, getFieldsValue, validate, updateSchema },
  ] = useForm({
    labelWidth: 180,
    schemas: getDatabaseForm(),
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });
  function onDataReceive(data) {
    console.log('Data Received', data);
  }

  const tableRef = ref<{ getDataSource: () => any } | null>(null);
  // 提交表单
  function addSubmitForm() {
    if (tableRef.value) {
      console.log('table data:', tableRef.value.getDataSource());
    }
    // 这里是验证表单必填值
    validate((errors) => {
      if (errors) {
        // 如果有错误，表示验证失败，不执行接下来的操作
        console.log('验证失败:', errors);
        return;
      }
    });
    // 获取表单中的值
    let data = getFieldsValue();
    if (tableRef.value) {
      data.field = tableRef.value.getDataSource();
      console.log(data.field);
    }

    // 代码生成接口
    addCodeGeneration(data);
  }
  // function handleVisibleChange(v) {
  //   v && props.userData && nextTick(() => onDataReceive(props.userData));
  // }
</script>
<style>
  .note {
    color: #555; /* 更柔和的颜色 */
    font-weight: 600; /* 适度的字体粗细 */
    font-style: italic; /* 斜体文本 */
    background-color: #f8f8f8; /* 轻微的背景色，增加层次感 */
    padding: 8px 16px; /* 内边距 */
    border-left: 4px solid #ff8800; /* 左侧边框，增加视觉焦点 */
    margin: 16px 0; /* 外边距 */
    transition: background-color 0.3s ease; /* 悬停效果的过渡动画 */
  }
  .note:hover {
    background-color: #e9ecef; /* 悬停时背景色变化 */
  }
  .dark .note {
    color: #fff;
    background-color: #957d5f; /* 轻微的背景色，增加层次感 */
  }
</style>
